import { observer } from "mobx-react";
import { DropTarget } from 'react-dnd';
import { dndTypes } from "../../../constants";
import DragPreview from "./priview";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@DropTarget([dndTypes.TABLE, dndTypes.JOINED_TABLE], {
    drop: (props, monitor) => {
        const didDrop = monitor.didDrop();
        const source = monitor.getItem().node;
        // joined table之间drop 和 拖动joined table不做改变 
        if (didDrop || source.id) return;
        props.onDrop(source, {}, dndTargets.WORKSPACE);
    }
}, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    getItem: monitor.getItem(),
    isOver: monitor.isOver()
}))
@observer
export default class Setting extends React.Component {
    render() {
        const { connectDropTarget } = this.props;
        return connectDropTarget(
            <div className="edc-ds-ws">
                <div className='edc-ds-blank'>
                    {getLabel('502691','请将左侧的表拖入工作区')}
                    </div>
                <DragPreview ecId={`${this && this.props && this.props.ecId || ''}_DragPreview@70njyb`}></DragPreview>
            </div>
        );
    }
}